<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>办件评价详情</title>
		<link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{background:#eee;overflow: auto;}
			.mui-content{background: #eee;margin-top: 0.0rem;padding: 0 !important;}
			.mui-bar{width:7.5rem;height: 0.9rem !important;}
			.mui-table-view-cell{overflow: inherit;}
			.title_box{background: #fff;width: 7.5rem;height: 2rem;padding-left: 0.24rem;padding-top: 0.31rem}
			.bg_blue{background:#f8c96f;}
			.bg_blue01{background:#79c3f7;}
			.bg_green{background:#60e9e1;}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left;width: 100%;}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:.25rem !important;margin:0.09rem 0 0 0.09rem;}
			.title_box .mui-media-body{width:6.2rem;float:left;overflow:visible;}
			.title_box .mui-media-body>div{width:100%;float:left;}
			.title_box .mui-media-body .body_view{font-size:.3rem;}
			.title_box .mui-media-body .body_view>span,.title_box .mui-media-body .mui-ellipsis>span{float:left;width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
			.title_box .mui-media-body .work_time{color:#b0b0b0;font-size:.24rem;}
			.title_box .mui-media-body .mui-ellipsis{color:#666;font-size:.24rem;overflow:visible;}
			.title_box .icon-more{width:.45rem;float:right;height:.45rem;position:relative;}
			.title_box .icon-more>img{margin-top:-.03rem;}
			.title_box .zhuangtai{width:1.68rem;float:right;text-align:right;font-size:.28rem;margin-top:-.07rem;overflow:hidden;}			
			.info{width: 100%;height: 0.78rem;background: #eeeeee;color: #333333;font-size: 0.28rem;padding-left: 0.24rem;line-height: 0.78rem;}		
			.time{background: #fff;width: 100%;height: 1.1rem;line-height: 1.1rem;padding-left: 0.24rem;padding-right: 0.24rem;}
			.time input{width: 1rem;height: 0.64rem;float: right;margin-top: 0.21rem;margin-right: 0.21rem;}
			.time span:first-child{float: left;}
			.time span:nth-child(2){float: right;}
			.mui-table-view-cell.mui-active{background-color: #fff;}
			
			.mui-table-view .mui-table-view-cell{font-size: 0.28rem;}
			.btn_box{padding-left: 0.69rem;height: 1.34rem;}
			.btn_box div{width: 0.46rem;height: 0.45rem;float: left;margin-right: 0.9rem;position: relative;}
			.btn_box div:last-child{margin: 0;}
			.zan{background: url(../../images/work/zan.png) no-repeat center center;background-size: cover;}
			.flower{background: url(../../images/work/flower.png) no-repeat center center;background-size: cover;}
			.aixin{background: url(../../images/work/aixin.png) no-repeat center center;background-size: cover;}
			.buhao{background: url(../../images/work/buhao.png) no-repeat center center;background-size: cover;}
			.no{background: url(../../images/work/no.png) no-repeat center center;background-size: cover;}
			.btn_box div span{display: block;width: 2rem;text-align: center;position: absolute;left: -0.8rem;bottom: -0.5rem;}
		
			.banshi{margin-top: 0.1rem;}
			.banshi_title span:first-child{font-size: 0.3rem;}
			.banshi_title span:last-child{font-size: 0.28rem;color: #d0d0d0;}
			.banshi_star{height: 0.87rem;}
			.banshi_star div{float: left;margin-right: 0.2rem;width: 0.4rem;height: 0.4rem;background: url(../../images/work/star0.png) no-repeat center center;background-size: cover;}
		
			.text_box{width: 100%;height: 4.01rem;background: #fff;margin-top: 0.1rem;padding-left: 0.24rem;padding-top: 0.3rem;}
			.text_box textarea{background: #eee;border: none;width: 7.07rem;height: 2.24rem;margin-top: 0.2rem;}
			.time_cishu{float: right; width: 3.2rem; height: .65rem;}
			.time_cishu .mui-numbox{width: 2.6rem;}
			.mui-numbox{border:1px solid #007bff;border-radius: 0;}
			.mui-numbox [class*=numbox-btn]{background-color: #007bff;border-radius: 0; color: #fff;}
			.mui-numbox .mui-numbox-input{border: none!important;}
			.mui-btn-blue{padding: .2rem 0; width: 6rem; margin:.5rem auto;}
			.btn_box .active:nth-of-type(1){background: url(../../images/work/zan1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(2){background: url(../../images/work/flower1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(3){background: url(../../images/work/aixin1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(4){background: url(../../images/work/buhao1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.btn_box .active:nth-of-type(5){background: url(../../images/work/no1.png) no-repeat center center; background-size: cover; color: #ff6000;}
			.text_box{position: relative;}
			.text_box .tips{position: absolute; right: .3rem; bottom: .95rem; font-size: .24rem; color: #999999;}														
		</style>
	</head>
	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">我的评价</h1>
		</div>-->
		<div class="mui-content" id="itemContents">
			<div class="title_box">
				<span class="navigate_img bg_blue">
				<img class="tjfwl" src="../../images/work/icon-shh-@2x.png">
				</span>
				<div class="mui-media-body">
					<div class="body_view">
						<span>{{zwfwCaseEvaluate.serviceName}}</span>
						<div class="icon-more"></div>
					</div>
					<div class="work_time">{{zwfwCaseEvaluate.applyTime}}</div>
					<div class='mui-ellipsis'>
						<span>办件编号:{{zwfwCaseEvaluate.caseNum}}</span>
					</div>
				</div>
			</div>
			<div class="info">您的评价将有助于提升我们的服务</div>
			<div class="time">
				<div class="time_cishu" style="float: left;">
					<span>到现场次数 {{zwfwCaseEvaluate.xcCounts}} 次</span>
				</div>
			</div>
			<ul class="mui-table-view manyi">
			    <li class="mui-table-view-cell">满意度评价</li>
			    <li class="mui-table-view-cell btn_box">
			    	<div class="eva zan active" valNum="5">
			    		<span>非常满意</span>
			    	</div>
			    	<div class="eva flower" valNum="4">
			    		<span>满意</span>
			    	</div>
			    	<div class="eva aixin" valNum="3">
			    		<span>基本满意</span>
			    	</div>
			    	<div class="eva buhao" valNum="2">
			    		<span>不满意</span>
			    	</div>
			    	<div class="eva no" valNum="1">
			    		<span>非常不满意</span>
			    	</div>
			    </li>
			 </ul>
				<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>办事效率</span>
			    	<br />
			    	<span>实际办结时间与承诺时间符合度</span>
			    </li>
				<div starName="bzxl" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>办事指南符合度</span>
			    	<br />
			    	<span>实际办事的材料要求和流程与公开的办事指南符合度</span>
			    </li>
				<div starName="znfhd" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>服务质量</span>
			    	<br />
			    	<span>对在线咨询，现场办理情况进行评价</span>
			    </li>
				<div starName="fwzl" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>去现场次数满意度</span>
			    	<br />
			    	<span>办事要求去现场次数数量是否合理满意</span>
			    </li>
				<div starName="xccs" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<ul class="mui-table-view banshi">
			    <li class="mui-table-view-cell banshi_title">
			    	<span>网上办事</span>
			    	<br />
			    	<span>对网上办事进行总体评价</span>
			    </li>
				<div starName="wsbs" class="icons mui-inline" style="margin-left: 6px; padding: .2rem;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</ul>
			<div class="text_box">
				<span>评价内容</span>
				<textarea name="" rows="" cols="" placeholder="请输入评价内容" readonly="true">{{zwfwCaseEvaluate.pjDesc}}</textarea>					
			</div>		
		</div>
		
		
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>	
	<script src="../../js/jquery2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/feedback.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue.min.js"></script>
	<script type="text/javascript">
     	mui.plusReady(function() {
				var oid = utils.getUrlParam('oid');
				loadData(oid);
			});
			
			var itemContents = new Vue({
				el: '#itemContents',
				data: {
					zwfwCaseEvaluate: {} //评价基本信息
				}
			});
			
			/**
			 * 加载办件数据
			 * @param {Object} oid 评价主键
			 */
			function loadData(oid){
				var param = jsonToParams({
					'oid':oid,				
				    });
				var url = 'appHttpService/myEvaluateDetail.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.state == 0) {
						
						var zwfwCaseEvaluate = data.zwfwCaseEvaluateVo;
						var zwfwCase = data.zwfwCaseVo;
						  //满意度
					      $('.eva').removeClass('active');
					      $('.eva').each(function(key,value){
				        	 var pjTerm = zwfwCaseEvaluate.pjTerm;
				        	 
				        	 if(pjTerm != null){
				        	 	if(pjTerm == $(this).attr("valNum")){
				        			$(this).addClass('active');
				        	 	}
				        	 }
				        	 
					      });
						
						 //评价星星
				         $('.icons').each(function(){
				        	var starName = $(this).attr("starName");
				            var indexStar = $(this).find('i');
				            var sloStar = "1";
				            if(starName == "bzxl"){
				            	sloStar = zwfwCaseEvaluate.bzxl;
				            }
				            if(starName == "znfhd"){
				            	sloStar = zwfwCaseEvaluate.znfhd;
				            }
				            if(starName == "fwzl"){
				            	sloStar = zwfwCaseEvaluate.fwzl;
				            }
				            if(starName == "xccs"){
				            	sloStar = zwfwCaseEvaluate.xccs;
				            }
				            if(starName == "wsbs"){
				            	sloStar = zwfwCaseEvaluate.wsbs;
				            }
				            
				            indexStar.removeClass('mui-icon-star-filled');
				            for(var i=0;i<sloStar;i++){
				                indexStar.eq(i).addClass('mui-icon-star-filled');
				            }
				        });
						
						itemContents.zwfwCaseEvaluate = {
							serviceName:zwfwCase.serviceName,
							caseNum: zwfwCase.caseNum,
							applyTime:utils.format(zwfwCase.applyTime,'yyyy-MM-dd HH:mm:ss'),
							
							xcCounts: zwfwCaseEvaluate.xcCounts,
							pjTerm: zwfwCaseEvaluate.pjTerm,
							bzxl: zwfwCaseEvaluate.bzxl,
							znfhd: zwfwCaseEvaluate.znfhd,
							fwzl: zwfwCaseEvaluate.fwzl,
							xccs:zwfwCaseEvaluate.xccs,
							wsbs:zwfwCaseEvaluate.wsbs,
							pjDesc:zwfwCaseEvaluate.pjDesc
						};																							
					}else{
						mui.toast('未找到相关信息');
					}
				}, param);
			}
			
			
	</script>
</html>